<template>
	<view class="container">
		<view class="form_content">
			<u-form
				labelWidth="150rpx"
				labelPosition="left"
				:model="formData"
				ref="uForm"
			>
				<u-form-item :required="true" label="姓名" borderBottom>
					<u-input
						v-model="formData.contact_name"
						placeholder="收货人姓名"
						border="none"
					></u-input>
				</u-form-item>
				<u-form-item :required="true" label="手机" borderBottom>
					<u-input
						v-model="formData.contact_phone"
						placeholder="收货人手机号"
						border="none"
					></u-input>
				</u-form-item>
				<u-form-item :required="true" label="邮编" borderBottom>
					<u-input
						v-model="formData.zip"
						placeholder="邮编"
						border="none"
					></u-input>
				</u-form-item>
				<u-form-item :required="true" label="地区" borderBottom>
					<picker
						mode="region"
						:value="date"
						@change="bindTimeChange"
					>
						<u-input
							placeholder="请选择省市区"
							readonly
							border="none"
							v-model="provinceName"
						/>
					</picker>
				</u-form-item>
				<u-form-item :required="true" label="详细地址">
					<u-input			
						v-model="formData.address"
						placeholder="请输入详细地址"
						border="none"
					/>
				</u-form-item>
			</u-form>
		</view>
		<view class="bottom_btn">
			<view @click="save" class="btn">保存</view>
		</view>
	</view>
</template>

<script>
import { addressList , addaddress , upaddress , deladdress } from '../../api/address'; 
export default {
	data() {
		return {
			date: '',
			provinceName:'',
			formData: {
				contact_name: '',
				zip: '',
				contact_phone: '',
				province: '',
				city: '',
				district: '',
				address: ''
			}
		};
	},
	// onReady() {
	// 	//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
	// 	this.$refs.uForm.setRules(this.rules);
	// },
	onLoad(options){
		console.log(options.val) 
		this.type = options.type
		if(this.type == 'update'){
			const info = JSON.parse(options.val)
			this.formData = {
				id:info.id,
				contact_name: info.contact_name,
				zip: info.zip,
				contact_phone: info.contact_phone,
				province: info.province,
				city: info.city,
				district: info.district,
				address: info.address
			}
			this.provinceName = `${this.formData.province}-${this.formData.city}-${this.formData.district}`;
		}
		
	},
	methods: {
		// 获取省市区
		bindTimeChange(e) {
			this.formData.province = e.detail.value[0];
			this.formData.city = e.detail.value[1];
			this.formData.district = e.detail.value[2];
			this.provinceName = `${e.detail.value[0]}-${e.detail.value[1]}-${e.detail.value[2]}`;
		},
		 save(){
			 if(this.type == 'update'){
				upaddress(this.formData).then(res => {
					uni.showToast({
						title:res.message
					})
				})
			 }else{
				 addaddress(this.formData).then(res => {
				 	uni.showToast({
				 		title:res.message
				 	})
				 })
			 }
		 }
	}
};
</script>

<style lang="scss" scoped>
.container {
	.form_content {
		background-color: #fff;
		padding: 10rpx 30rpx;
		min-height: 450rpx;
	}
	.bottom_btn {
		color: #fff;
		position: fixed;
		width: 100%;
		bottom: 30rpx;
		.btn {
			background-color: #1786f8;
			text-align: center;
			padding: 20rpx 0;
			margin: 0 30rpx;
			border-radius: 50rpx;
		}
	}
}
</style>
